<template>
  <div class="vaw-header-layout" :class="{'full-bg': appStore.layoutMode === 'ltr'}">
    <!-- 只有在上下布局时展示LOGO和主导航 -->
    <div class="logo-wrapper" v-if="appStore.layoutMode === 'ttb' || appStore.layoutMode === 'ltr'">
      <Logo :always-show="true" :show-text="appStore.layoutMode === 'ttb'"/>
    </div>
    <div class="menu-wrapper" v-if="appStore.layoutMode === 'ttb'">
      <RootMenu :routes="permissionStore.getTopLevelTabs" mode="horizontal" @top-item-click="onTopItemClick" />
    </div>
    <a-card class="right-wrapper" :body-style="{ padding: 0, height: '100%' }" :header-style="{ padding: 0 }" :bordered="false">
      <div class="flex items-center justify-end h-full">
        <template v-if="appStore.deviceType !== 'mobile'">
          <ActionItems />
        </template>
        <div class="avatar-wrapper">
          <VAWavatar />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
  import useAppConfigStore from '@/store/modules/app-config'
  import usePermissionStore from '@/store/modules/permission'
  import { defineComponent } from 'vue'
  import { RouteRecordRaw, useRouter } from 'vue-router'
  export default defineComponent({
    name: 'VAWHeader',
    setup() {
      const router = useRouter()
      const appStore = useAppConfigStore()
      const permissionStore = usePermissionStore()
      function handlePath(routes: RouteRecordRaw[]) {
        for (let index = 0; index < routes.length; index++) {
          const it = routes[index]
          if (it.children && it.children.length > 0) {
            handlePath(it.children)
          } else {
            router.push(it.path)
          }
          break
        }
      }
      function onTopItemClick(key: string) {
        handlePath(permissionStore.getTopLevelTabs.find((it) => it.path === key)?.items || [])
      }
      return {
        permissionStore,
        appStore,
        onTopItemClick,
      }
    },
  })
</script>

<style scoped lang="less">
  .vaw-header-layout {
    height: @logoHeight;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
    background: red;
    // border-bottom: 1px solid var(--color-border);
    //.logo-wrapper {
    //  width: calc(@menuWidth + 20px);
    //}
    .logo-wrapper {
      display: flex;
      align-items: center;
      //padding: 0 16px;
      height: 100%;

      /* 左右布局时固定宽度，仅显示图标 */
      &.ltr-mode {
        width: 10px;
        justify-content: center;

        .logo-text {
          display: none;
        }
      }

      /* 上下布局时正常显示图标和文字 */
      &.ttb-mode {
        width: calc(@menuWidth + 20px);

        .logo-text {
          display: block;
        }
      }
    }
    .menu-wrapper {
      flex: 1;
      overflow: hidden;
      :deep(.arco-menu-horizontal) {
        height: @logoHeight;
        width: 100%;
      }
      :deep(.arco-menu-horizontal .arco-menu-inner) {
        overflow: hidden;
        padding: 9px 10px 8px 10px;
      }
      :deep(.arco-menu-selected-label) {
        bottom: -8px;
        height: 2px;
      }
    }
    .right-wrapper {
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .avatar-wrapper {
        padding-right: 15px;
        margin-left: 10px;
      }
    }
    /* 左右布局时的全背景样式 */
    &.full-bg {
      background: #a14f8c; /* 使用系统背景色变量 */
      justify-content: space-between;

      .logo-wrapper {
        /* 强制应用左右布局样式 */
        @extend .ltr-mode;
      }

      .right-wrapper {
        background: transparent; /* 取消卡片原有背景 */
        :deep(.arco-card-body) {
          background: transparent;
        }
      }
    }
  }
</style>
